<template>
  <div class="about-us">
    <!-- 头部背景图 -->
    <el-image class="about-bg" :src="aboutBg" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
    <!-- 图片介绍区域 -->
    <div class="container">
      <div class="bg-one">
        <el-image class="one-img" :src="bg1" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
        <div class="one-dec">{{ $t("companyIntroduction") }}</div>
      </div>
      <div class="bg-two">
        <div class="two-img" v-for="(item, index) in bgTwoList" :key="index">
          <el-image :src="item" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
        </div>
      </div>
      <!-- 为什么选择我们 -->
      <div class="bg-three">
        <div class="change-title">{{ $t("chooseUs") }}</div>
        <p class="dec-info">{{ $t("trustworthy") }}</p>
        <p class="dec-info">{{ $t("sanyOfficial") }}</p>
        <div class="info-center">
          <div class="center-item">
            <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/change-1.png" />
            <p class="info-t">{{ $t("machineryQuality") }}</p>
            <div class="info-b">
              <span>SANY</span>
              <span>{{ $t("officialCertified") }}</span>
            </div>
          </div>
          <div class="center-item">
            <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/change-2.png" />
            <p class="info-t">{{ $t("noWorry") }}</p>
            <p class="info-line">{{ $t("findingEquipment") }}</p>
            <div class="info-b" style="margin-top: 30px">
              <span>1000+</span>
              <span>{{ $t("updateEquipment") }}</span>
            </div>
          </div>
          <div class="center-item">
            <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/change-3.png" />
            <p class="info-t">{{ $t("satisfied") }}</p>
            <div class="info-b">
              <span>5000+</span>
              <span>{{ $t("happyCustomers") }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 专业&效率 -->
      <div class="bg-four">
        <el-image :src="bg2" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
        <div class="tips">
          <span>{{ $t("pie") }}</span>
          <span>{{ $t("ourTeam") }}</span>
        </div>
      </div>
      <div class="bg-five">
        <div class="two-img" v-for="(item, index) in bgFiveList" :key="index">
          <el-image :src="item" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
        </div>
      </div>
      <!-- 客户来访 -->
      <div class="visitor-bg">
        <div class="region-title">
          <div class="region-tip"></div>
          <span>{{ $t("clientVisit") }}</span>
        </div>
        <div class="region-img">
          <div class="item-img" v-for="(item, index) in visitorList" :key="index">
            <el-image class="img-b" :src="item.img" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
            <p>{{ item.dec }}</p>
          </div>
        </div>
      </div>
      <!-- 销往全球 -->
      <div class="global-bg">
        <div class="region-title">
          <div class="region-tip"></div>
          <span>{{ $t("soldGlobally") }}</span>
        </div>
        <div class="title-info">{{ $t("covering") }}</div>
        <div class="info-img">
          <el-image :src="global1" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
          <p>{{ $t("2019-60") }}</p>
        </div>
        <div class="region-img">
          <div class="item-img" v-for="(item, index) in globalList" :key="index">
            <el-image class="img-b" :src="item.img" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
            <p>{{ item.dec }}</p>
          </div>
        </div>
      </div>
      <!-- 来电咨询 -->
      <div class="service-bg">
        <el-image class="service-img" :src="two5" lazy fit="cover" :alt="`${$t('platform')}`"></el-image>
        <div class="service-box">
          <div class="service-title">{{ $t("expect") }}</div>
          <div class="service-phone">
            <span>+86 191 8699 3576</span>
            <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/right-small-red.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- 侧边栏服务 -->
    <Dangling v-if="locale == 'zh-CN'" />
    <!-- WhatsApp -->
    <!-- <WhatsApp v-if="locale == 'en-US'" /> -->
    <!-- 在线客服 -->
    <Connect />
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "AboutUs",
  layout: "Layout",
  components: {},
  data() {
    return {
      aboutBg: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/about-bg-new.png",
      bg1: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/bg-1.png",
      bg2: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/bg-2.png",
      global1: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-1.png",
      two5: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-5.png",
      bgTwoList: [
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-1.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-2.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-3.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-4.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-5.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-6.png"
      ],
      bgFiveList: [
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-1.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-2.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-3.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-4.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-5.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-6.png"
      ],
      visitorList: [
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-1.png" },
        { dec: this.$i18n.t("2023-clients"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-2.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-3.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-4.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-5.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-6.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-7.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-8.png" }
      ],
      globalList: [
        { dec: this.$i18n.t("2021-50"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-2.png" },
        { dec: this.$i18n.t("2020-8018"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-3.png" },
        { dec: this.$i18n.t("2019-285"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-4.png" },
        { dec: this.$i18n.t("2011-46"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-5.png" }
      ]
    }
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        }
      ]
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.getPoint()
  },
  methods: {
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.about-us {
  .about-bg {
    width: 100%;
  }
  .bg-one {
    display: flex;
    margin-top: 30px;
    .one-img {
      width: 40%;
    }
    .one-dec {
      width: 60%;
      background: #f6f7f9;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22px;
      color: #333;
      line-height: 42px;
      padding: 30px;
      box-sizing: border-box;
    }
  }
  .bg-two {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
    .two-img {
      width: 49%;
      margin-bottom: 20px;
    }
  }
  .bg-three {
    height: 100%;
    background: linear-gradient(180deg, #ff6c55 0%, #ffc757 100%);
    padding: 30px 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .change-title {
      width: 312px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: #fff;
      border-radius: 30px;
      font-family: AlibabaPuHuiTiB;
      font-size: 40px;
      color: #ff7656;
      margin-bottom: 20px;
    }
    .dec-info {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 22px;
      color: #fff;
      line-height: 42px;
      text-align: center;
    }
    .info-center {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      .center-item {
        width: 340px;
        height: 400px;
        border-radius: 10px;
        border: 2px solid #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 110px;
          height: 110px;
          margin-top: 30px;
        }
        .info-t {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30px;
          color: #fff;
          line-height: 30px;
          text-align: center;
          margin-top: 30px;
        }
        .info-line {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30px;
          color: #fff;
          line-height: 30px;
          text-align: center;
          margin-top: 10px;
        }
        .info-b {
          margin-top: 70px;
          display: flex;
          flex-direction: column;
          align-items: center;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #fff;
            line-height: 30px;
            &:nth-child(1) {
              font-size: 30px;
            }
            &:nth-child(2) {
              font-size: 22px;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  .bg-four {
    position: relative;
    .tips {
      width: 100%;
      height: 150px;
      background: #d71519;
      position: absolute;
      left: 0;
      top: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #fff;
        &:nth-child(1) {
          font-size: 40px;
          line-height: 40px;
        }
        &:nth-child(2) {
          font-size: 30px;
          line-height: 30px;
          margin-top: 20px;
        }
      }
    }
  }
  .bg-five {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .two-img {
      width: 32%;
      margin-bottom: 20px;
    }
  }
  .visitor-bg {
    margin-top: 16px;
    .region-title {
      display: flex;
      align-items: center;
      justify-content: center;
      .region-tip {
        width: 15px;
        height: 36px;
        background: #d71519;
        margin-top: 2px;
      }
      span {
        font-family: AlibabaPuHuiTiB;
        font-size: 40px;
        color: #333;
        line-height: 40px;
        margin-left: 10px;
      }
    }
    .region-img {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;
      .item-img {
        width: 24%;
        margin-bottom: 20px;
        p {
          height: 68px;
          text-align: center;
          background: #f6f7f9;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #333;
          line-height: 24px;
          border-radius: 0 0 10px 10px;
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }
  }
  .global-bg {
    margin-top: 20px;
    .region-title {
      display: flex;
      align-items: center;
      justify-content: center;
      .region-tip {
        width: 15px;
        height: 36px;
        background: #d71519;
        margin-top: 2px;
      }
      span {
        font-family: AlibabaPuHuiTiB;
        font-size: 40px;
        color: #333;
        line-height: 40px;
        margin-left: 10px;
      }
    }
    .title-info {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30px;
      color: #333;
      line-height: 30px;
      text-align: center;
      margin-top: 12px;
      margin-bottom: 30px;
    }
    .info-img {
      position: relative;
      p {
        width: 100%;
        height: 160px;
        line-height: 160px;
        text-align: center;
        background: rgba(0, 0, 0, 0.6);
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40px;
        color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .region-img {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;
      .item-img {
        width: 49%;
        margin-bottom: 20px;
        position: relative;
        p {
          width: 100%;
          height: 90px;
          line-height: 90px;
          text-align: center;
          background: rgba(0, 0, 0, 0.6);
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28px;
          color: #fff;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
    }
  }
  .service-bg {
    width: 100%;
    height: 340px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .service-img {
      width: 50%;
      height: 340px;
    }
    .service-box {
      width: 50%;
      height: 100%;
      background: #d71519;
      padding: 34px 50px 50px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .service-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40px;
        color: #fff;
        line-height: 60px;
      }
      .service-phone {
        width: 400px;
        height: 80px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30px;
          color: #d71519;
        }
        img {
          width: 14px;
          height: 26px;
          margin-left: 10px;
        }
      }
    }
  }
  .img-b {
    display: block;
  }
}
</style>
